<template>
  <div class="analysis h-full flex flex-col justify-center items-center">
    <div
      class="bg-level w-full flex-center text-white"
      style="background-image: url('static/icons/level-high.png')"
      v-if="score / allScore >= 0.8"
    >
      {{ score }}
    </div>
    <div
      class="bg-level w-full flex-center text-white"
      style="background-image: url('static/icons/level-middle-yellow.png')"
      v-else-if="score / allScore >= 0.4 && score / allScore < 0.8"
    >
      {{ score }}
    </div>
    <div
      class="bg-level w-full flex-center text-white"
      style="background-image: url('static/icons/level-low.png')"
      v-else
    >
      {{ score }}
    </div>
    <div class="text-333 mt-2px" style="font-size: 0.16rem"> 得分 </div>
  </div>
</template>

<script>
export default {
  props: {
    score: {
      type: Number,
      default: 0
    },
    allScore: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {}
  },
  mounted() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
.analysis {
  width: 50px;

  .bg-level {
    height: 50px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px 50px;
    font-size: 14px;
  }
}
</style>
<template>
  <div class="h-full flex flex-col justify-center items-center py-20px">
    <div class="analysis">
      <el-progress type="circle" :percentage="scoreaverage" :color="color" :stroke-width="12" :format="setText" :style="{'--color':color}"/>
    </div>
    <div class="text-333 mt-2px" style="font-size: 0.24rem"> 得分 </div>
  </div>
</template>

<script>
export default {
  props: {
    score: {
      type: Number,
      default: 0
    },
    scoreaverage: {
      type: Number,
      default: 0
    }
  },
  computed: {
    color() {
      let color = 'rgba(255, 64, 64, 1)'
      switch (true) {
        case this.scoreaverage >= 0 && this.scoreaverage < 60:
          color = 'rgba(255, 64, 64, 1)'
          break
        case this.scoreaverage >= 60 && this.scoreaverage < 80:
          color = 'rgba(253, 181, 78, 1)'
          break
        case this.scoreaverage >= 80:
          color = 'rgba(48, 201, 161, 1)'
          break
        default:
          break
      }
      console.log(this.scoreaverage,this.score)
      return color
    }
  },
  data() {
    return {}
  },
  methods: {
    setText(){
      return this.score+''
    }
  }
}
</script>

<style lang="scss" scoped>
.analysis {
  width: 75px;
  height: 75px;
  display: flex;
  justify-content: center;
  align-items: center;
  ::v-deep .el-progress {
    width: 75px !important;
    height: 75px !important;
    .el-progress-circle {
      width: 75px !important;
      height: 75px !important;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-progress__text{
      font-size: 20px !important;
      color: var(--color) !important;
    }
  }
}
</style>
